import React, {PureComponent} from 'react';
import {Form, Input, Modal, DatePicker, Select, Button} from 'antd';
import moment from 'moment';

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 6},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 12},
    md: {span: 15},
  },
};

const dateFormat = "YYYY-MM-DD";

@Form.create()
export default class MenuModal extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      endTime:'',
      loading: false
    };
  }

  componentDidMount() {
    const {modalType, modalVisible, items} = this.props;
    if (modalVisible) {
      this.setState({
        loading: false
      });
      if (modalType === 'edit' && items.endTime) {
        this.setState({
          endTime: moment(items.endTime, dateFormat),
          selectedValue: items.state
        })
      }
    }

  }

  handleOk = () => {
    const _this = this;
    const {form, handleSave} = this.props;
    form.validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return
      }
      let range = values.range;
      if(range){
        values.endTime = range.format(dateFormat)+" 23:59:59";
        delete values.range;
      }else {
        values.endTime=''
      }
      _this.setState({buttonLoading:true});
      handleSave(values, form);
    })
  }

  handleChange = (value) => {
    console.log(value); // { key: "lucy", label: "Lucy (101)" }
    this.setState({selectedValue: value})
  }

  render() {
    const {form: {getFieldDecorator}, items, modalType, modalVisible, handleModalCancel, buttonLoading} = this.props;
    const {endTime, loading, selectedValue} = this.state;
    return (
      <div>
        <Modal
          title={modalType === 'add' ? '新增' : '修改'}
          visible={modalVisible}
          onOk={this.handleOk}
          onCancel={()=>handleModalCancel()}
          footer={[
            <Button key="back" onClick={()=>handleModalCancel()}>
              取消
            </Button>,
            <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
              保存
            </Button>,
          ]}
        >
          <Form>
            {getFieldDecorator('id', {
              initialValue: items.id,
            })(
              <Input hidden={true}/>
            )}
            <FormItem
              {...formItemLayout}
              label="机器码"
            >
              {getFieldDecorator('machineCode', {
                initialValue: items.machineCode,
                rules: [{
                  required: true, message: '请输入机器码',
                }],
              })(
                <Input placeholder="请输入机器码"/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="激活状态"
            >
              {getFieldDecorator('state', {
                initialValue: items.state,
                rules: [{
                  required: true, message: '请选择状态',
                }],
              })(
                <Select placeholder="请选择状态" onChange={this.handleChange}>
                  <Select.Option key={"NO_ACTIVATE"} value={"NO_ACTIVATE"}>未激活</Select.Option>
                  <Select.Option key={"ACTIVATE"} value={"ACTIVATE"}>激活</Select.Option>
                </Select>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="环境"
            >
              {getFieldDecorator('environment', {
                initialValue: items.environment,
                rules: [{
                  required: true, message: '请选择环境',
                }],
              })(
                <Select placeholder="请选择环境">
                  <Select.Option key={"WC"} value={"WC"}>微信</Select.Option>
                  <Select.Option key={"TT"} value={"TT"}>抖音</Select.Option>
                  <Select.Option key={"ALL"} value={"ALL"}>全部</Select.Option>
                </Select>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="截止时间"
            >
              {getFieldDecorator('range', {
                initialValue: endTime,
                rules: [{
                  required: selectedValue&&selectedValue==='ACTIVATE', message: '请选择日期',
                }],
              })(
                <DatePicker
                  style={{width: '100%'}}
                  placeholder={'结束日期'}//current && current < moment().endOf('day')
                  format={dateFormat}
                />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="推荐人"
            >
              {getFieldDecorator('recommend', {
                initialValue: items.recommend,
                rules: [{
                  required: false, message: '请输入推荐人',
                }],
              })(
                <Input placeholder="请输入推荐人"/>
              )}
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}
